<template>
<!-- 只显示通过部分文章列表所以reason不需要 -->
     <div id="articleList">
            <div class="ablock">
         <mt-header title="历史发布" >
                <router-link to="/index" slot="left">
                    <mt-button icon="back">返回</mt-button>
                </router-link>                  
            </mt-header>
                <el-input placeholder="请输入新鲜事ID" style='width:80%;margin:1rem .2rem;' suffix-icon="el-icon-search" v-model="msgId" @change="searchMsg"></el-input>
                <el-button type="danger" icon="el-icon-delete" circle @click='deleteLists'></el-button>
<!-- 单个新鲜事区域 -->
                  <ul v-show='is_only_new_show'>
                   <li>
                        <img src="../assets/img/error.png" alt="" class="error" v-show="onlyMsgObj.status==2?false:true">  
                        <div class="bblock" :class="{Bblock:isShow}">
                            <div class="btop">
                                <!-- <span class="left">校园随手拍</span> -->
                                <span class="left">{{this.$store.state.schoolNews}}</span>
                                <h1 style="color:red">{{this.$store.state.schoolNews}}</h1>
                                <span class="right">{{onlyMsgObj.time}}</span>
                                <!-- <h2>{{this.$store.state.notAuditShow}}</h2> -->
                                <p class="clear"></p>
                            </div>
                            <div class="bbottom">
                                <!-- 齐心协力，共创未来————记天杭童真少华学部期末动员大会 -->
                                <h3>{{onlyMsgObj.title}}</h3>
                                <h1>{{onlyMsgObj.reason}}</h1>
                                <h1 @click='deleteNews(onlyMsgObj.id)'>x</h1>
                                <img src="http://img3.redocn.com/20130403/Redocn_2013040315103491.jpg" alt="">
                            </div>
                           
                        </div>
                        <!-- 显示不通过原因 -->
                        <p class="comment" v-show="onlyMsgObj.status==2?false:true">{{onlyMsgObj.reason}}</p> 
                    </li>
                </ul>
<!-- 新鲜事列表区域 -->           
            <!-- <article-component :notAuditShow="isAuditShow" :article="msg"></article-component> -->
                <ul v-show='is_news_show'>
                   <li v-for="item in articalList" >
                        <img src="../assets/img/error.png" alt="" class="error" v-show="item.status==2?false:true"> 
                        <div class="bblock" :class="{Bblock:isShow}" @click='jumpTo(item.id,item.title,item.desc,item.imgs)'>
                            <div class="btop">
                                <span class="left" v-if='item.type>0'>校园随手拍</span>
                                <span class="left" v-else>校园新鲜事</span>
                                <span class="right">{{item.time}}</span>
                                <!-- <h2>{{this.$store.state.notAuditShow}}</h2> -->
                                <p class="clear"></p>
                            </div>
                            <div class="bbottom">
                                <!-- 齐心协力，共创未来————记天杭童真少华学部期末动员大会 -->
                                <h3>{{item.title}}</h3>
                                <h1>{{item.reason}}</h1>
                                
                                <input type="checkbox" :id='item.id' ref='del'  style="width:0.48rem;height:0.48rem;margin:0 auto;">
                                <!-- <h1 v-if='item.imgs.length>0'>{{item.imgs[0].src}}</h1> -->
                                <img v-if='item.imgs.length>0'  :src="item.imgs[0].src" alt="">
                                <img v-else  src="http://125.210.160.93:8080/images/smedu/1001/easy/JMBLLRQM_BQ64_15WB.jpg" alt="">
                            </div>
                           
                        </div>
                        <h1 @click='deleteNews(item.id)'>x</h1>
                        <!-- 显示不通过原因 -->
                        <p class="comment" v-show="item.status==2?false:true">{{item.reason}}</p> 
                    </li>
                </ul>
                <!--///////////////控制上面元素的显示 -->
                <!-- <h1>{{notAuditShow}}</h1>
                <h1>{{article}}</h1> -->
            </div>
    </div> 
        
  
</template>
<script>
import ArticleComponent from './ArticleComponent'
    export default{
        data(){
            return{
               isAuditShow:true,
               msg:'历史发布',
               articalList:[],
               isShow:true,
               msgId:'',
               //单个查询返回的数据对象
               onlyMsgObj:{},
                //控制单个查询内容显示
               is_only_new_show:false,
                //控制列表查询内容显示
               is_news_show:true,
               //批量删除id集合
               deleteListId:[],
               imgFirst:''
            }
        },
        methods:{
            //单个删除
            deleteNews(id){
                var url="http://125.210.160.93:8080/SmEdu/priv/news/doDelete";
                this.$http.post(url,{id:id}).then((res)=>{
                console.log(res);
                this.requestList();
               }).catch((err)=>{
                 console.log(err);
               })
            },
            //批量删除
            deleteLists(){
                this.deleteListId=[];
                var input=this.$refs.del;
                for(var i=0;i<input.length;i++){
                    if(input[i].checked) {
                        this.deleteListId.push(input[i].id)
                     }
                }
                // this.$http.post(url,{ids:this.deleteListId}).
                console.log(this.deleteListId);
                var url="http://125.210.160.93:8080/SmEdu/priv/news/doDeletes";
                console.log('/////////////////////////');
                // qs.stringify({ids: [115,116]}, {arrayFormat:'brackets'})
                this.$http.post(url, {ids:this.deleteListId}).then((res)=>{
                    console.log(res);
                    this.requestList();
                }).catch((err)=>{
                    console.log(err);
                })
            },
            requestList(){
                var url="http://125.210.160.93:8080/SmEdu/pass/news/OK";
                this.$http.post(url,{schoId:19,pageNum:1,pageSize:100}).then((res)=>{
                   console.log(res);
                   console.log(res.data.body);
                   console.log(res.data.body.length);
                   console.log(res.data.body.imgs);
                   this.$store.state.allArticleCount=res.data.body.length;
                   this.articalList=res.data.body;
                }).catch((err)=>{
                    console.log(err);
                })
            },
            searchMsg(){
                var url="http://125.210.160.93:8080/SmEdu/port/news/find";
                this.$http.post(url,{newsid:this.msgId}).then((res)=>{
                console.log(res);
                this.onlyMsgObj=res.data.body;
                this.is_only_new_show=true;
                this.is_news_show=false;
               }).catch((err)=>{
                 console.log(err);
               })
            },
            jumpTo(id,title,content,src){
                this.$router.push({path:'/index/articlelist/articlelistpage/ald',query:{id,title,content,src}});
            }
        },
        watch:{
// 可以监控id实时查询内容因为其id不连贯所以有问题可惜！
            /*msgId(a){
                console.log(a);
                if(a.length>1){
                    this.searchMsg();
                }else if(a.length==0){
                    console.log('&&&&&&&&&&&&&&&&&&&&');
                    this.requestList();
                    this.is_only_new_show=false;
                    this.is_news_show=true;
                }
            }*/
            msgId(curVal){
             if(curVal.length==0){
                    this.requestList();
                    this.is_only_new_show=false;
                    this.is_news_show=true;
                }
            }
        },
        components:{
            ArticleComponent
        },
         mounted(){
             this.requestList();
        }
    }
</script>

<style>
  #articleList{
        background: #eee;
        min-height:16.47rem;
        margin-top:-0.24rem;
    }
    #articleList .ablock li{
        margin:0.25rem ;
        background:#fff; 
        position: relative;
    }
     #articleList .bblock{
         width:95%;
         margin:0 auto;      
         overflow: auto;
        
     }
     .Bblock{
         border-bottom: 1px solid #ccc;
     }
     #articleList .bblock .btop{
         height:0.8rem;
     }
     #articleList .bblock .left{
        float:left;
        padding:0.1333rem;
     }
     #articleList .bblock .right{
        float:right;
        padding:0.16rem;
     }
     #articleList .bblock  .bbottom{
         text-align:left;
         display:flex;
         justify-content:space-between;
     }
     #articleList .bblock  .bbottom h3{
         width:70%;
     }
      #articleList .bblock  .bbottom img{
          width:1.8667rem;
          height:1.8667rem;
          padding: 0.2667rem;
      }
       #articleList .error{
           position: absolute;
           width:3.2rem;
           height:3.2rem;
           left:2.9333rem;
       }
        #articleList .comment{
            color:#FFAB49;
            text-align:left;
            padding: 0.2667rem;
        }
</style>

